<template>
  <div class="relative">
    <!-- 侧边栏 -->
    <aside 
      class="fixed top-0 left-0 h-full bg-white dark:bg-secondary-800 shadow-lg transition-all duration-300 z-40"
      :class="isCollapsed ? 'w-16' : 'w-64'"
    >
      <div class="h-full flex flex-col">
        <!-- 侧边栏头部 -->
        <div class="h-16 flex items-center justify-between border-b border-gray-200 dark:border-secondary-700 px-4">
          <h2 class="text-lg font-semibold text-primary-600 dark:text-primary-400" v-if="!isCollapsed">AI绘画平台</h2>
          <div class="flex-1 flex justify-center" v-else>
            <el-icon class="text-xl text-primary-600 dark:text-primary-400"><Picture /></el-icon>
          </div>
          <button 
            class="p-2 rounded-full text-secondary-500 hover:bg-gray-100 dark:hover:bg-secondary-700 focus:outline-none"
            @click="$emit('toggle-sidebar')"
          >
            <el-icon class="text-lg">
              <ArrowLeft v-if="!isCollapsed" />
              <ArrowRight v-else />
            </el-icon>
          </button>
        </div>
        
        <!-- 导航菜单 -->
        <nav class="flex-1 overflow-y-auto py-4">
          <div class="px-3 space-y-1">
            <router-link 
              to="/home" 
              class="flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors"
              :class="isActiveMenu('/home') ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300' : 'text-secondary-600 hover:bg-gray-100 dark:text-secondary-300 dark:hover:bg-secondary-700'"
              @click="navigate('/home')"
            >
              <el-icon class="text-lg" :class="{'mr-3': !isCollapsed}"><HomeFilled /></el-icon>
              <span v-if="!isCollapsed">首页</span>
            </router-link>
            
            <router-link 
              to="/shopping" 
              class="flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors"
              :class="isActiveMenu('/shopping') ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300' : 'text-secondary-600 hover:bg-gray-100 dark:text-secondary-300 dark:hover:bg-secondary-700'"
              @click="navigate('/shopping')"
            >
              <el-icon class="text-lg" :class="{'mr-3': !isCollapsed}"><ShoppingCart /></el-icon>
              <span v-if="!isCollapsed">电商</span>
            </router-link>
            
            <router-link 
              to="/tools" 
              class="flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors"
              :class="isActiveMenu('/tools') ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300' : 'text-secondary-600 hover:bg-gray-100 dark:text-secondary-300 dark:hover:bg-secondary-700'"
              @click="navigate('/tools')"
            >
              <el-icon class="text-lg" :class="{'mr-3': !isCollapsed}"><Tools /></el-icon>
              <span v-if="!isCollapsed">工具</span>
            </router-link>
            
            <router-link 
              to="/entertainment" 
              class="flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors"
              :class="isActiveMenu('/entertainment') ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300' : 'text-secondary-600 hover:bg-gray-100 dark:text-secondary-300 dark:hover:bg-secondary-700'"
              @click="navigate('/entertainment')"
            >
              <el-icon class="text-lg" :class="{'mr-3': !isCollapsed}"><VideoPlay /></el-icon>
              <span v-if="!isCollapsed">娱乐</span>
            </router-link>
            
            <router-link 
              to="/life" 
              class="flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors"
              :class="isActiveMenu('/life') ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300' : 'text-secondary-600 hover:bg-gray-100 dark:text-secondary-300 dark:hover:bg-secondary-700'"
              @click="navigate('/life')"
            >
              <el-icon class="text-lg" :class="{'mr-3': !isCollapsed}"><Watch /></el-icon>
              <span v-if="!isCollapsed">生活</span>
            </router-link>
            
            <router-link 
              to="/design-editor" 
              class="flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors"
              :class="isActiveMenu('/design-editor') ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300' : 'text-secondary-600 hover:bg-gray-100 dark:text-secondary-300 dark:hover:bg-secondary-700'"
              @click="navigate('/design-editor')"
            >
              <el-icon class="text-lg" :class="{'mr-3': !isCollapsed}"><Brush /></el-icon>
              <span v-if="!isCollapsed">设计工具</span>
            </router-link>
            
            <router-link 
              to="/my" 
              class="flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors"
              :class="isActiveMenu('/my') ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300' : 'text-secondary-600 hover:bg-gray-100 dark:text-secondary-300 dark:hover:bg-secondary-700'"
              @click="navigate('/my')"
            >
              <el-icon class="text-lg" :class="{'mr-3': !isCollapsed}"><User /></el-icon>
              <span v-if="!isCollapsed">我的</span>
            </router-link>
          </div>
        </nav>
        
        <!-- 侧边栏底部 -->
        <div class="p-4 border-t border-gray-200 dark:border-secondary-700" v-if="!isCollapsed">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center text-primary-600 dark:text-primary-400">
                <el-icon><User /></el-icon>
              </div>
            </div>
            <div class="ml-3">
              <p class="text-sm font-medium text-secondary-700 dark:text-secondary-200">访客用户</p>
              <p class="text-xs text-secondary-500 dark:text-secondary-400">点击登录</p>
            </div>
          </div>
        </div>
        
        <!-- 收缩状态下的用户图标 -->
        <div class="p-4 border-t border-gray-200 dark:border-secondary-700 flex justify-center" v-if="isCollapsed">
          <div class="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center text-primary-600 dark:text-primary-400">
            <el-icon><User /></el-icon>
          </div>
        </div>
      </div>
    </aside>
    
    <!-- 遮罩层 - 仅在移动端且侧边栏展开时显示 -->
    <div 
      v-if="!isCollapsed" 
      class="fixed inset-0 bg-black bg-opacity-50 z-30 md:hidden"
      @click="$emit('toggle-sidebar')"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, inject } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { 
  HomeFilled, 
  ShoppingCart, 
  Tools, 
  VideoPlay, 
  Watch, 
  User,
  ArrowLeft,
  ArrowRight,
  Picture,
  Brush
} from '@element-plus/icons-vue';

const props = defineProps({
  isCollapsed: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['toggle-sidebar']);
const route = useRoute();
const router = useRouter();

// 获取主题状态
const isDark = inject('isDark', ref(false));

// 确定当前活动菜单
const isActiveMenu = (path: string) => {
  return route.path.startsWith(path);
};

// 导航处理
const navigate = (path: string) => {
  router.push(path);
};
</script> 